<template>
  <!-- 电商回收链接  商品列表  -->
  <div class="app-container backorder_page">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
      <el-form-item label="游戏名称" prop="gameId">
        <el-select filterable v-model="queryParams.gameId" placeholder="请选择游戏" clearable>
          <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="回收链接" prop="outLinkBackId">
        <el-select filterable v-model="queryParams.outLinkBackId" placeholder="请选择回收链接" clearable>
          <el-option v-for="dict in linkList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="游戏账号" prop="accountNumber">
        <el-input v-model="queryParams.accountNumber" placeholder="请输入游戏账号" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="contactPhone">
        <el-input v-model="queryParams.contactPhone" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker clearable v-model="createTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" type="warning" plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box table_box_new">
      <el-table :data="tableData.records" border stripe v-loading="loading">
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="outLinkBackName" label="来源链接" width="160"></el-table-column>
        <el-table-column prop="gameName" label="游戏名称"></el-table-column>
        <el-table-column prop="accountNumber" label="游戏账号"></el-table-column>
        <el-table-column prop="contactPhone" label="手机号" width="120"></el-table-column>
        <el-table-column prop="region" label="区服"></el-table-column>
        <!-- <el-table-column prop="relname" label="实名"></el-table-column> -->
        
        
        <el-table-column prop="des" label="账号简介" min-width="150" show-overflow-tooltip></el-table-column>
        
        <el-table-column prop="img" label="游戏截图" min-width="150">
          <template slot-scope="scope">
            <img-box width="50px" isWrap="nowrap" :height="50" :img="scope.row.img"></img-box>
          </template>
        </el-table-column>
        <el-table-column prop="relnameImg" label="实名截图" width="80">
          <template slot-scope="scope">
            <img-box width="50px" isWrap="nowrap" :height="50" :img="scope.row.relnameImg"></img-box>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="add" @click="openOrderDetail(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages-box">
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <dianshangGoodsDetail ref="dianshangGoodsDetail"></dianshangGoodsDetail>

  </div>
</template>
<script>
import dianshangGoodsDetail from "./dianshangGoodsDetail.vue";
import dianshangHuishouApi from "@/api/tenantApis/dianshangHuishou";
export default {
  components: { dianshangGoodsDetail },
  name: "DianshangHuishouGoods",
  data() {
    return {
      gameList: [],
      linkList: [],
      createTime: [],
      queryParams: {
        gameId: "",
        outLinkBackId: "",
        accountNumber: "",
        contactPhone: "",
        pageNum: 1,
        pageSize: 10,
      },

      tableData: { records: [], total: 0 },
      loading: false,
    };
  },
  computed: {
    // userInfo() {
    // return this.$store.getters.userInfo;
    // },
    // shopInfo() {
    // return this.$store.getters.shopInfo;
    // },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  mounted() {
    this.getLinkList();
    this.getList();
  },

  methods: {
    // 查询所有回收链接
    getLinkList() {
      dianshangHuishouApi.outLinkBackList({
        isPage:2
      }).then((res) => {
        this.linkList = res.rows;
      });
    },
    // 列表
    getList() {
      this.loading = true;
      const obj = this.queryParams;
      if (this.createTime.length == 2) {
        obj.createTimeStart = this.createTime[0] + " 00:00:00";
        obj.createTimeEnd = this.createTime[1] + " 23:59:59";
      } else {
        obj.createTimeStart = "";
        obj.createTimeEnd = "";
      }
      dianshangHuishouApi.outLinkBackFill(obj).then((res) => {
        this.tableData = { records: res.rows, total: res.total };
        this.loading = false;
      });
    },
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.$nextTick(() => {
        this.$refs.queryForm.resetFields();
        this.createTime = [];
        this.getList();
      });
    },

    openOrderDetail(row) {
      this.$refs.dianshangGoodsDetail.open(row);
    },

  },
};
</script>
